<template>
  <div class="page-container">
    <!-- 头部导航 -->
    <div class="header">
      <div class="back-btn" @click="handleBack">
        <i class="fas fa-arrow-left"></i>
      </div>
      <div class="header-title">{{ course.title || "精品心理学课程" }}</div>
      <div class="back-btn" style="visibility: hidden">
        <i class="fas fa-arrow-left"></i>
      </div>
    </div>

    <div class="container">
      <!-- 富文本内容 -->
      <div class="rich-text-container" v-if="course.content">
        <div class="rich-text-content" v-html="course.content"></div>
      </div>

      <!-- 课程基本信息 -->
      <div class="course-info-container">
        <div class="course-title">{{ course.title }}</div>
        <div class="course-tag">{{ course.tag }}</div>
        <div class="course-meta">
          <div class="meta-item">
            <i class="fas fa-clock"></i>
            <span>{{ course.days }}天</span>
          </div>
          <div class="meta-item">
            <i class="fas fa-signal"></i>
            <span>{{ getDifficultyText(course.difficultyLevel) }}</span>
          </div>
          <div class="meta-item">
            <i class="fas fa-yuan-sign"></i>
            <span>¥{{ course.price }}</span>
          </div>
        </div>
        <div class="course-description">
          {{ course.info }}
        </div>
      </div>

      <!-- 报名表单 -->
      <div class="form-container">
        <div class="form-title">预报名登记</div>
        <div class="form-description">
          若您对我们的课程感兴趣，请留下您的姓名和联系方式，课程顾问将与您联系！
        </div>
        <div class="form-notice">请留意 400-123-4567 电话的来电</div>

        <form @submit.prevent="handleSubmit">
          <div class="form-group">
            <label for="name" class="form-label">姓名</label>
            <input
              type="text"
              id="name"
              class="form-input"
              v-model="formData.name"
              placeholder="请输入您的姓名"
              required
              :disabled="isSubmitting"
            />
          </div>

          <div class="form-group">
            <label for="phone" class="form-label">联系方式</label>
            <input
              type="tel"
              id="phone"
              class="form-input"
              v-model="formData.phone"
              placeholder="请输入您的手机号码"
              required
              :disabled="isSubmitting"
            />
          </div>

          <button
            type="submit"
            class="submit-btn"
            :disabled="isSubmitting"
            :class="{ 'btn-disabled': isSubmitting }"
          >
            <i class="fas fa-paper-plane"></i>
            {{ isSubmitting ? "提交中..." : "立即报名" }}
          </button>
        </form>
      </div>
    </div>

    <!-- 消息提示 -->
    <div v-if="messageVisible" :style="messageStyle" class="message-popup">
      {{ messageText }}
    </div>
  </div>
</template>

<script>
import { joinTheCourse } from "@/api/manager";

export default {
  name: "PsychologyCourse",
  data() {
    return {
      formData: {
        name: "",
        phone: "",
      },
      course: {
        isCheckIn: 0,
        price: 0,
        difficultyLevel: 1,
        banner: "",
        days: 0,
        id: null,
        state: 1,
        tag: "",
        title: "",
        info: "",
        content: "",
      },
      messageVisible: false,
      messageText: "",
      messageColor: "",
      messageTimeout: null,
      isSubmitting: false,
    };
  },
  computed: {
    messageStyle() {
      return {
        background: this.messageColor,
        color: "white",
      };
    },
  },
  created() {
    // 从路由获取课程数据
    if (this.$route.query.course) {
      this.course = JSON.parse(this.$route.query.course);
      console.log("课程数据:", this.course);
    }
  },
  methods: {
    getDifficultyText(level) {
      const levels = {
        1: "初级",
        2: "中级",
        3: "高级",
      };
      return levels[level] || "未知";
    },

    async handleSubmit() {
      const { name, phone } = this.formData;

      // 表单验证
      if (!name) {
        this.displayMessage("请输入您的姓名", "#ffc046");
        return;
      }

      if (!phone) {
        this.displayMessage("请输入您的手机号码", "#ffc046");
        return;
      }

      if (!/^1[3-9]\d{9}$/.test(phone)) {
        this.displayMessage("请输入正确的手机号码", "#ffc046");
        return;
      }

      // 检查用户是否登录
      const userId = localStorage.getItem("userId");
      if (!userId) {
        this.displayMessage("请先登录", "#ffc046");
        return;
      }

      // 检查课程ID
      if (!this.course.id) {
        this.displayMessage("课程信息错误，请重新进入页面", "#ff6b6b");
        return;
      }

      this.isSubmitting = true;
      this.displayMessage("提交中...", "#5b67ff");

      try {
        const requestData = {
          courseId: this.course.id,
          userId: userId,
          name: name,
          phone: phone,
        };

        const res = await joinTheCourse(requestData);

        if (res.code === 200) {
          this.displayMessage("报名成功！", "#48d597");
          // 清空表单
          this.formData.name = "";
          this.formData.phone = "";
          setTimeout(() => {
            this.$router.go(-1);
          }, 1500);
        } else {
          // 根据不同的错误码显示不同的提示信息
          const errorMsg = res.message || "报名失败，请稍后重试";
          this.displayMessage(errorMsg, "#ff6b6b");
        }
      } catch (error) {
        console.error("报名接口调用失败:", error);
        this.displayMessage("网络错误，请检查网络连接后重试", "#ff6b6b");
      } finally {
        this.isSubmitting = false;
      }
    },

    handleBack() {
      this.$router.go(-1);
    },

    displayMessage(text, color) {
      this.messageText = text;
      this.messageColor = color;
      this.messageVisible = true;

      // 清除之前的定时器
      if (this.messageTimeout) {
        clearTimeout(this.messageTimeout);
      }

      // 3秒后隐藏消息
      this.messageTimeout = setTimeout(() => {
        this.messageVisible = false;
      }, 3000);
    },
  },
};
</script>

<style scoped>
/* 原有的样式保持不变，只添加一个禁用状态的样式 */
.btn-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.btn-disabled:hover {
  background: #5b67ff !important;
  transform: none !important;
}

/* 富文本容器样式 */
.rich-text-container {
  background: white;
  border-radius: 18px;
  padding: 25px;
  margin: 20px 0;
  box-shadow: 0 6px 20px rgba(134, 151, 206, 0.15);
}

.rich-text-content {
  line-height: 1.7;
  color: #5a6478;
}

.rich-text-content >>> img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.rich-text-content >>> p {
  margin-bottom: 1em;
}

.rich-text-content >>> *:last-child {
  margin-bottom: 0;
}

/* 课程信息样式 */
.course-info-container {
  background: white;
  border-radius: 18px;
  padding: 25px;
  margin: 20px 0;
  box-shadow: 0 6px 20px rgba(134, 151, 206, 0.15);
}

.course-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1a233d;
  line-height: 1.4;
}

.course-tag {
  display: inline-block;
  background: #eef0ff;
  color: #5b67ff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.course-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e7ebf3;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #5b67ff;
  font-size: 0.9rem;
  font-weight: 600;
}

.meta-item i {
  font-size: 0.8rem;
}

.course-description {
  color: #5a6478;
  line-height: 1.7;
  font-size: 0.95rem;
}

.page-container {
  max-width: 500px;
  margin: 0 auto;
  background: linear-gradient(135deg, #f9faff 0%, #f5f7ff 100%);
  color: #1a233d;
  line-height: 1.6;
  min-height: 100vh;
  font-size: 15px;
  font-family: "Noto Sans SC", sans-serif;
}

.container {
  max-width: 100%;
  padding: 0 16px;
  margin: 0 auto;
}

/* 头部导航 */
.header {
  background: white;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1a233d;
}

.back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #eef0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5b67ff;
  cursor: pointer;
}

/* 报名表单 */
.form-container {
  background: white;
  border-radius: 18px;
  padding: 25px;
  margin: 20px 0;
  box-shadow: 0 6px 20px rgba(134, 151, 206, 0.15);
}

.form-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #1a233d;
}

.form-description {
  font-size: 1rem;
  color: #8a94a6;
  margin-bottom: 25px;
  line-height: 1.7;
}

.form-notice {
  font-size: 0.9rem;
  color: #ffc046;
  margin-bottom: 20px;
  padding: 12px;
  background: rgba(255, 192, 70, 0.1);
  border-radius: 8px;
  border-left: 4px solid #ffc046;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1a233d;
}

.form-input {
  width: 80%;
  padding: 14px 16px;
  border: 1px solid #e7ebf3;
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.3s ease;
  color: #1a233d;
  background: white;
}

.form-input:focus {
  border-color: #5b67ff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(91, 103, 255, 0.2);
}

.form-input::placeholder {
  color: #b0b8c5;
}

/* 报名按钮 */
.submit-btn {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  background: #5b67ff;
  color: white;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
  box-shadow: 0 6px 18px rgba(91, 103, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.submit-btn:hover {
  background: #4a54e5;
  transform: translateY(-3px);
}

/* 消息提示 */
.message-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding: 14px 30px;
  border-radius: 30px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  animation: fadeIn 0.5s;
  text-align: center;
  min-width: 300px;
  max-width: 90%;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px) translateX(-50%);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
  }
}

/* 响应式设计 */
@media (max-width: 480px) {
  .form-title {
    font-size: 1.2rem;
  }

  .form-description {
    font-size: 0.95rem;
  }

  .submit-btn {
    font-size: 1rem;
  }

  .action-btn {
    padding: 12px 25px;
    font-size: 1rem;
  }

  .message-popup {
    min-width: 250px;
    padding: 12px 20px;
    font-size: 0.9rem;
  }

  .course-meta {
    flex-wrap: wrap;
    gap: 15px;
  }

  .course-title {
    font-size: 1.2rem;
  }
}
</style>
